<template>
  <div id="userRegisterPage">
    <!-- 背景遮罩层 -->
    <div class="background-overlay">
      <!-- 注册容器 -->
      <div class="register-container">
        <h2 class="title">辅助学习系统 - 用户注册</h2>
        <!-- 注册表单 -->
        <a-form :model="formState" name="basic" autocomplete="off" @finish="handleSubmit">
          <!-- 账号输入项 -->
          <a-form-item
            name="userAccount"
            :rules="[{ required: true, message: '请输入账号' }]"
          >
            <a-input
              v-model:value="formState.userAccount"
              placeholder="请输入账号"
            />
          </a-form-item>
          <!-- 密码输入项 -->
          <a-form-item
            name="userPassword"
            :rules="[
              { required: true, message: '请输入密码' },
              { min: 6, message: '密码不能小于 6 位' },
            ]"
          >
            <a-input-password
              v-model:value="formState.userPassword"
              placeholder="请输入密码"
            />
          </a-form-item>
          <!-- 确认密码输入项 -->
          <a-form-item
            name="checkPassword"
            :rules="[
              { required: true, message: '请再次输入密码' },
              { min: 6, message: '密码不能小于 6 位' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('userPassword') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次输入的密码不一致'));
                },
              }),
            ]"
          >
            <a-input-password
              v-model:value="formState.checkPassword"
              placeholder="请再次输入密码"
            />
          </a-form-item>
          <!-- 返回登录提示 -->
          <div class="tips">
            <RouterLink to="/user/login">返回登录</RouterLink>
          </div>
          <!-- 注册按钮 -->
          <a-form-item>
            <a-button type="primary" html-type="submit" style="width: 100%">注册</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { userRegisterUsingPost } from '@/api/userController';
import { message } from 'ant-design-vue';

// 定义表单状态
const formState = reactive({
  userAccount: '',
  userPassword: '',
  checkPassword: '',
});

// 获取路由实例
const router = useRouter();

/**
 * 提交表单
 * @param values 表单提交的值
 */
const handleSubmit = async (values: any) => {
  try {
    // 发起注册请求
    const res = await userRegisterUsingPost(values);
    if (res.data.code === 0 && res.data.data) {
      // 注册成功提示
      message.success('注册成功');
      // 跳转到登录页面
      router.push({
        path: '/user/login',
        replace: true,
      });
    } else {
      // 注册失败提示
      message.error('注册失败，' + res.data.message);
    }
  } catch (error) {
    // 处理请求异常
    message.error('注册请求发生错误，请稍后重试');
  }
};
</script>

<style scoped>
#userRegisterPage {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-container {
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  width: 360px;
}

.title {
  text-align: center;
  margin-bottom: 24px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.tips {
  margin-bottom: 16px;
  color: #888;
  font-size: 13px;
  text-align: right;
}

a-form-item {
  margin-bottom: 20px;
}

a-button {
  height: 40px;
  font-size: 16px;
  border-radius: 4px;
}
</style>
